
import router from '@system.router';
import anime from "../../common/js/anime.js"
export default {
    data: {
      testInt:0,
      passTime:0,
      currentTime:0,
      animeData:{
        value:0
      },
      start:false,
      intervalType:false,
      anime_linear:false,
      anime_easing:false,
      anime_easing_Quint:false,
      anime_bezier:false,
      anime_easing_InOutBack:false,

      nowFre:16
    },
    onchange(type) {
        router.push({
            uri: "pages/" + type + "/index"
        })
    },
    onShow(){
      this.linear = anime({
        targets: this.animeData,
        value: 270,
        round: 1,
        easing: 'linear',
        loop: true,
        autoplay:false,
        //60:16 24:41
        duration: this.nowFre,
        direction:"normal",
        update: (e)=> {
          //        console.info(JSON.stringify(e))
          console.info(JSON.stringify(this.animeData.value))
          this.testInt = this.animeData.value
        },
        begin:()=>{
        },
        loopBegin: function(anim) {

        },
        loopComplete: (anim)=> {
          this.testInt = 0
        }
      })
      this.easing = anime({
        targets: this.animeData,
        value: 270,
        round: 1,
        easing: 'easeInOutQuad',
        loop: true,
        autoplay:false,
        //60:16 24:41
        duration: this.nowFre,
        direction:"alternate",
        update: (e)=> {
          //        console.info(JSON.stringify(e))
          console.info(JSON.stringify(this.animeData.value))
          this.testInt = this.animeData.value

        },
        begin:()=>{
        },
        loopBegin: function(anim) {

        },
        loopComplete: (anim)=> {
        }
      })
      this.easing_Quint = anime({
        targets: this.animeData,
        value: 270,
        round: 1,
        easing: 'easeInOutQuint',
        loop: true,
        autoplay:false,
        //60:16 24:41
        duration: this.nowFre,
        direction:"alternate",
        update: (e)=> {
          //        console.info(JSON.stringify(e))
          console.info(JSON.stringify(this.animeData.value))
          this.testInt = this.animeData.value

        },
        begin:()=>{
        },
        loopBegin: function(anim) {

        },
        loopComplete: (anim)=> {
        }
      })
      this.easing_InOutBack = anime({
        targets: this.animeData,
        value: 270,
        round: 1,
        easing: 'easeInOutBack',
        loop: true,
        autoplay:false,
        //60:16 24:41
        duration: this.nowFre,
        direction:"alternate",
        update: (e)=> {
          //        console.info(JSON.stringify(e))
          console.info(JSON.stringify(this.animeData.value))
          this.testInt = this.animeData.value

        },
        begin:()=>{
        },
        loopBegin: function(anim) {

        },
        loopComplete: (anim)=> {
        }
      })
      this.bezier = anime({
        targets: this.animeData,
        value: 270,
        round: 1,
        easing: 'cubicBezier(.5, .05, .1, .3)',
        loop: true,
        autoplay:false,
        //60:16 24:41
        duration: this.nowFre,
        direction:"alternate",
        update: (e)=> {
          //        console.info(JSON.stringify(e))
          console.info(JSON.stringify(this.animeData.value))
          this.testInt = this.animeData.value
        },
        begin:()=>{
        },
        loopBegin: function(anim) {

        },
        loopComplete: (anim)=> {
        }
      })
    },
  intervalLoop(){
    if (this.intervalType) {
      this.intervalType = false
      clearInterval(this.loopBox)
    }else{
      this.intervalType = true

      this.loopBox = setInterval(()=>{

        console.info(this.testInt)
        if(this.testInt < 270){
          this.testInt+=1
        }else{
          this.testInt = 0
        }
      },this.nowFre/270)
    }
  },
  animeLinearLoop(){
    if (this.anime_linear) {
      this.anime_linear = false
      this.linear.pause()
    }else{
      this.anime_linear = true
      this.linear.play()
    }
  },
  animeEasingLoop(){
    if (this.anime_easing) {
      this.anime_easing = false
      this.easing.pause()
    }else{
      this.anime_easing = true
      this.easing.play()
    }
  },
  animeEaseQuintLoop(){
    if (this.anime_easing_Quint) {
      this.anime_easing_Quint = false
      this.easing_Quint.pause()
    }else{
      this.anime_easing_Quint = true
      this.easing_Quint.play()
    }
  },
  animeBezierLoop(){
    if (this.anime_bezier) {
      this.anime_bezier = false
      this.bezier.pause()
    }else{
      this.anime_bezier = true
      this.bezier.play()
    }
  },
  animeEaseInOutBackLoop(){
    if (this.anime_easing_InOutBack) {
      this.anime_easing_InOutBack = false
      this.easing_InOutBack.pause()
    }else{
      this.anime_easing_InOutBack = true
      this.easing_InOutBack.play()
    }
  },

  changeFre(freInt){
    this.nowFre = freInt
    console.info(JSON.stringify(this.easing))
    this.linear.animations[0].tweens[0].duration = freInt
    this.linear.duration = freInt
    this.easing.animations[0].tweens[0].duration = freInt
    this.easing.duration = freInt
    this.bezier.animations[0].tweens[0].duration = freInt
    this.bezier.duration = freInt
    this.easing_Quint.animations[0].tweens[0].duration = freInt
    this.easing_Quint.duration = freInt
    this.easing_InOutBack.animations[0].tweens[0].duration = freInt
    this.easing_InOutBack.duration = freInt
  }
}
